<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:cc="http://java.sun.com/jsf/composite">

    <!-- INTERFACE -->
    <cc:interface>
        <cc:attribute name="formName" required="true"/>
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>

        <f:view>

                <h:head>
                    <title>Image Upload</title>
                </h:head>

                <h:body>

                    <h:form id="formMain" enctype="multipart/form-data" prependId="false">

                        <p:panel header="Image Upload">

                            <h:panelGrid columns="2">

                                <h:outputText value="Upload Image: " />
                                <p:fileUpload fileUploadListener="#{mediaUploadManagedBean.handleImageUpload}"
                                              auto="true"
                                              update="imagePreview, msgs" />

                                <h:outputText value="Preview Image: " />
                                <p:graphicImage id="imagePreview" value="#{mediaUploadManagedBean.imageFilePath}" />

                                <p:growl id ="msgs" showDetail="true"></p:growl>
                            </h:panelGrid>

                        </p:panel>

                    </h:form>

                </h:body>

        </f:view>  

    </cc:implementation>
</html>